<template>
    <div class="main" ref="batchlist">
        <img src="../assets/logo.jpg" alt="">
        <div class="search">
            <div class="right">
                <i @click="scan" class="iconfont icon-Scan"></i>                
            </div>
            <div class="input">
                <i class="iconfont icon-search1187938easyiconnet"></i>
                <input type="text" v-model="BatchNo" name="" placeholder="批次号" id="">
            </div>
        </div>
        <button @click="query">查询</button>
    </div>
</template>

<script>
import {Toast} from 'vant'
    export default {
        data() {
            return {
                dztx: false,
                cgtx:true,
                clientHeight:'',
                BatchNo:''
            }
        },
        mounted(){
            //获取浏览器可视区域高度
            this.clientHeight =   `${document.documentElement.clientHeight}`             
            //document.body.clientWidth;
            console.log(this.clientHeight);
             
        },
        watch: {
            // 如果 `clientHeight` 发生改变，这个函数就会运行
            clientHeight: function () {
                    this.changeFixed(this.clientHeight)
                }
            },
        methods: {
            query(){
                if(this.BatchNo.length<11)
                {
                    Toast.fail('请输入11位批号');
                    return;
                }
                this.$router.push('/query/detail?BatchNo='+this.BatchNo)
            },
            scan() {
                  
                var that = this;  
                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function(res) {
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        this.$router.push('/query/detail?BatchNo='+result.split(',')[1])
                    }
                });
            },
            changeFixed(clientHeight){                        //动态修改样式
            
                this.$refs.batchlist.style.height = clientHeight - 90 + 'px';

            },
        },
        
    }
</script>

<style scoped lang='less'>
    .main {
        background: #fff;
        padding-top: 90px;
        min-height: 500px;
        img{
            height: 12rem;
        }
        button {
            background: #2cb98e;
            color: #fff;
            border: 0;
            font-size: 1rem;
            line-height: 2em;
            text-align: center;
            border-radius: 15px;
            padding: 0.2em 1em;
            width: 90%;
            margin: 2em auto;
        }
        .search {
            padding-left: 1.1rem;
            padding-right: 3em;
            position: relative;
            height: 50px;
            color: #ccc;
            .left {
                
                left: 15px;
                top: 5px;
                i {
                    font-size: 34px !important;
                    color: 666;
                    display: block;
                    
                }
            }
            .right {
                position: absolute;
                z-index: 99;
                right: 3em;
                top: 2px;
                i{
                    font-size: 32px !important;
                    color: #999;
                }
            }
            .input {
                position: relative;
                padding-top: 10px;
                display: flex;
                overflow: hidden;
                margin-left: 20px;
                i {
                    position: absolute;
                    left: 10px;
                    top: 15px;
                    
                     
                }
                input {
                    border-radius: 15px;                    
                    border: 2px solid #ccc;
                    outline: 0;
                    display: block;
                    height: 2em;
                    font-size: 1rem;
                    padding-left: 2em;
                    width: calc(100% - 16em);
                    color: #2cb98e;
                }
            }
        }
    }
</style>